<style scoped>
  .income{
    height:100%;
    background: #edf1f5;
  }
  .main{
  }
  .nav {
    position: fixed;
    top: 61px;
    width: 100%;
    z-index: 999999;
  }
  .nav ul{
    display: flex;
    flex-direction: row;
    padding:8px 0;
    background: #ffffff;
    border-bottom: 1px solid #e9e9e9;
  }
  .nav ul li{
    flex: 1;
  }
  .nav ul li a{
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: center;
    align-items: center;
  }
  .nav ul li p{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .activeLi {
    color: #4D63EB;
  }
  .nav ul li p b{
    width:50%;
    height:3px;
    background: -webkit-linear-gradient(right, #91A5F8, #6379F8);
    position: absolute;
    left:25%;
    bottom:-8px;
  }
  .nav ul li h4{
    color: #e9e9e9;
  }
  .weight-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #e9e9e9;
  }
  .weight-top div{
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
  }
  .weight-top div h4{
    opacity: 0.5;
  }
  .weight-top div h3{
    opacity: 0.5;
    margin-left: 4px;
  }
  /*.profit{*/
    /*margin-bottom: 60px;*/
  /*}*/
  .line1{
    height:200px;
    /*border-bottom: 6px solid #eeedf4;*/
    overflow: hidden;
    background: #ffffff;
  }
  .echarts {
    height: 200px;
    width:100%;
  }
  /*.echarts>div:first-child{*/
  /*width:100%;*/
  /*}*/
  .ryn{
    display: flex;
    flex-direction: row-reverse;
    padding: 10px 0;
    background: #ffffff;
  }
  .ryn ul{
    display: flex;
    margin-right: 20px;
  }
  .ryn ul li{
    width:26px;
    height: 26px;
    border: 1px solid #82A8FF;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
  }
  .ryn ul li.active{
    background: #6683ff;

  }
  .ryn ul li p{
    color: #6683ff;
  }
  .ryn ul li.active p{
    color: #ffffff;
  }
  .weight-top{
    background: #ffffff;
  }
  .fenxi{
    background: #ffffff;
    /*border-bottom: 1px solid #e9e9e9;*/
  }
  .fenxi>div{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #e9e9e9;
  }
  .fenxi>div>h3{
    flex: 3;
    display: flex;
    justify-content: center;
    padding-top: 10px;
  }
  .fenxi ul{
    display: flex;
    flex: 7;
    flex-direction: column;
  }
  .fenxi ul li{
    display: flex;
    justify-content: space-between;
    padding:10px 10px;
    align-items: center;
    border-bottom: 1px solid #e9e9e9;
  }
  .fenxi ul li:last-child{
    border-bottom: none;
  }
  .fenxi ul li>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .fenxi ul li>div>h2{
    color: #F84949;
    display: flex;
    flex-direction: row;
  }
  .fenxi ul li>div p{
    color: #F84949;
  }
  .green{
    color: #7ed321;
  }
  .fenxi ul li>div>h2>h3{
    color: #F84949;
    margin-top: 2px;
  }
  .fenxi ul li>div>h4{
    opacity: 0.5;
  }

  .unChoose{
    border-color: #e9e9e9!important;
    background: #FFFFFF!important;
  }
  .unChoose p{
    /*background: #e9e9e9;*/
    color: #e9e9e9!important;
  }

  .profit2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
  }
  .profit2 p{
    margin-top: 10px;
  }
  .profit2 h3{
    text-align: center;
    color: #6379F8;
  }

</style>
<template>
  <div class="income">
    <v-header
      :back="false"
      rightIcon="icon-liuyan"
      v-on:clickRightIcon="$router.push('/messageCenter')"
      :title="$route.meta.title"></v-header>
    <div class="main">
      <div class="nav">
        <ul>
          <li v-for="(item, idx) in icons">
            <a @click="gotoPage(item.href, idx)">
              <p :class="{ activeLi : item.isActive }">{{item.title}}<b v-show="item.isActive"></b></p>
            </a>
          </li>
        </ul>
      </div>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
      <keep-alive v-else>
          <router-view>
          </router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import host from '../../config.js'
  import axios from 'axios'
  import ECharts from 'vue-echarts/components/ECharts.vue'

  export default {
    components: {
      chart: ECharts
    },
    watch: {
      $route: function (val) {
        if (val.matched[1].path === '/income' && !val.matched[2]) {
          this.icons.forEach((item) => {
            if (item.isActive) this.$router.push(item.href)
          })
        }
      }
    },
    data () {
      return {
        icons: this.$config.incomeMenu,
        isIncomeAccount: null,
//        是否开户
        isAccount: null,
//        是否交易
        isIncome: null,
        token: null,
        line: null,
        allData: {
          portfolioN: null,
          benchmarkN: null,
          portfolioStat: {
            "dr": null,
            "mr": null,
            "yr": null,
            "dprofit": null,
            "mprofit": null,
            "yprofit": null
          },
          "benchmarkStat": {
            "dr": null,
            "mr": null,
            "yr": null
          },
          date: null
        },
        //      月周年
        weekActive: false,
        monthActive:false,
        yearActive: true,
        hasMonth: true,
        hasYear: true
      }
    },
    created () {
      if (this.$route.matched[2]) {
        this.icons.forEach((item) => {
          if (this.$route.fullPath === item.href) {
            item.isActive = true
          } else {
            item.isActive = false
          }
        })
      } else {
        this.icons[0].isActive = true
        this.icons[1].isActive = false
        this.icons[2].isActive = false
      }
    },
    activated () {
      let that = this
      this.icons.forEach((item) => {
        if (item.isActive) this.$router.push(item.href)
      })
      axios({
        method: 'get',
        headers: {'Authorization': window.localStorage.getItem('token')},
        url: host.host + "/api/trade/capital"
      }).then(function (data) {
        if(data.data.code === 6006) {
          that.$router.push('../login')
        }
        if(data.data.code === 6007) {
          that.$refreshToken()
        }
        if(data.data.code === 200) {
          let getData = data.data.data
          if(getData.total_position){
            that.isIncomeAccount = true
          }
        }else{
          that.hasAccount()
        }
      })

      //    页面总数据
//      axios({
//        method: 'GET',
//        headers: {'Authorization': that.token},
//        url: host.host + "/api/trade/profitAnalysis"
//      }).then(function (data) {
//        var xdata = []
//        that.line = {
//          tooltip: {
//            show: true,
//            trigger: 'axis'
//          },
//          legend: {
//            data: ['Step Start', 'Step Middle']
//          },
//          toolbox: {
//            feature: {
//              saveAsImage: {}
//            }
//          },
//          grid: {
//            left: '2%',
//            top: '4%',
//            right: '3%',
//            bottom: '3%'
//          },
//          xAxis: [
//            {
//              splitLine: {
//                show: false
//              },
//              boundaryGap: false,
//              axisLabel: {
//                show: false
//              },
//              axisTick: false,
//              axisLine: {
//                lineStyle: {
//                  color: '#e9e9e9',
//                  opacity: 0.8
//                }
//              },
//              data: xdata
//            }
//          ],
//          yAxis: [
//            {
//              type: 'value',
//              splitNumber: 3,
//              splitLine: {
//                show: true,
//                lineStyle:{
//                  color: '#e9e9e9',
//                  opacity: 0.5
//                }
//              },
//              boundaryGap: false,
//              axisLabel: {
//                show: true
//              },
//              axisLine: {
//                show: false,
//                lineStyle: {
//                  color: '#e9e9e9',
//                  opacity: 0.8
//                }
//              },
//              axisTick: false
//            }
//          ],
//          series: [
//            {
//              name: '本组合收益(%)',
//              type: 'line',
//              areaStyle: {
//                show: false
//              },
//              itemStyle: {
//                normal: {
//                  color: '#F84949'
//                }
//              },
//              data: []
//            },
//            {
//              name: '标普500(%)',
//              type: 'line',
//              stack: '总量',
//              areaStyle: {
//                show: false
//              },
//              itemStyle: {
//                normal: {
//                  color: '#7792FF'
//                }
//              },
//              data: []
//            }
//          ]
//        }
//        if(data.data.code === 6006 || data.data.code === 6007){
//          that.$refreshToken
//        }
//        if(data.data.code === 200) {
//          if(!that.allData) return
//          if (that.allData.benchmarkN.length > 5) {
//            that.hasMonth = false
//          }
//          if (that.allData.benchmarkN.length > 22) {
//            that.hasYear = false
//          }
//          var dataLength = that.allData.benchmarkN.length
//          for(var i = 0; i < dataLength; i++){
//            that.line.series[0].data.push((that.allData.benchmarkN[i]*100).toFixed(2))
//          }
//          for(var j = 0; j < dataLength; j++){
//            that.line.series[1].data.push((that.allData.portfolioN[j]*100).toFixed(2))
//          }
//          for(var k = 0; k < dataLength; k++){
//            xdata.push((that.allData.date[k]))
//          }
//        }
//      })
    },
    methods: {
      gotoPage (href, idx) {
        this.$router.push(href)
        this.icons.forEach((item, idx) => {
          item.isActive = false
        })
        this.icons[idx].isActive = true
      },
//      year () {
//        if(!this.hasYear) return
//        this.weekActive = false
//        this.monthActive = false
//        this.yearActive = true
//        var xdata = []
//        this.line = {
//          tooltip: {
//            show: true,
//            trigger: 'axis'
//          },
//          legend: {
//            data: ['Step Start', 'Step Middle']
//          },
//          toolbox: {
//            feature: {
//              saveAsImage: {}
//            }
//          },
//          grid: {
//            left: '2%',
//            top: '4%',
//            right: '3%',
//            bottom: '3%'
////            width: '100%',
////            containLabel: true
//          },
//          xAxis: [
//            {
//              splitLine: {
//                show: false
//              },
//              boundaryGap: false,
//              axisLabel: {
//                show: false
//              },
//              axisTick: false,
//              axisLine: {
//                lineStyle: {
//                  color: '#e9e9e9',
//                  opacity: 0.8
//                }
//              },
//              data: xdata
//            }
//          ],
//          yAxis: [
//            {
//              type: 'value',
//              splitNumber: 3,
//              splitLine: {
//                show: true,
//                lineStyle:{
//                  color: '#e9e9e9',
//                  opacity: 0.5
//                }
//              },
//              boundaryGap: false,
//              axisLabel: {
//                show: true
//              },
//              axisLine: {
//                show: false,
//                lineStyle: {
//                  color: '#e9e9e9',
//                  opacity: 0.8
//                }
//              },
//              axisTick: false
//            }
//          ],
//          series: [
//            {
//              name: '本组合收益(%)',
//              type: 'line',
//              areaStyle: {
//                show: false
//              },
//              itemStyle: {
//                normal: {
//                  color: '#F84949'
//                }
//              },
//              data: []
//            },
//            {
//              name: '标普500(%)',
//              type: 'line',
//              stack: '总量',
//              areaStyle: {
//                show: false
//              },
//              itemStyle: {
//                normal: {
//                  color: '#7792FF'
//                }
//              },
//              data: []
//            }
//          ]
//        }
//        var dataLength = this.allData.benchmarkN.length
//        for(var i = 0; i < dataLength; i++){
//          this.line.series[0].data.push((this.allData.benchmarkN[i]*100).toFixed(2))
//        }
//        for(var j = 0; j < dataLength; j++){
//          this.line.series[1].data.push((this.allData.portfolioN[j]*100).toFixed(2))
//        }
//        for(var k = 0; k < dataLength; k++){
//          xdata.push((this.allData.date[k]))
//        }
//      },
//      month () {
//        if(!this.hasMonth) return
//        this.weekActive = false
//        this.monthActive = true
//        this.yearActive = false
//        var xdata = []
//        this.line = {
//          tooltip: {
//            show: true,
//            trigger: 'axis'
//          },
//          legend: {
//            data: ['Step Start', 'Step Middle']
//          },
//          toolbox: {
//            feature: {
//              saveAsImage: {}
//            }
//          },
//          grid: {
//            left: '2%',
//            top: '4%',
//            right: '3%',
//            bottom: '3%'
////            width: '100%',
////            containLabel: true
//          },
//          xAxis: [
//            {
//              splitLine: {
//                show: false
//              },
//              boundaryGap: false,
//              axisLabel: {
//                show: false
//              },
//              axisTick: false,
//              axisLine: {
//                lineStyle: {
//                  color: '#e9e9e9',
//                  opacity: 0.8
//                }
//              },
//              data: xdata
//            }
//          ],
//          yAxis: [
//            {
//              type: 'value',
//              splitNumber: 3,
//              splitLine: {
//                show: true,
//                lineStyle:{
//                  color: '#e9e9e9',
//                  opacity: 0.5
//                }
//              },
//              boundaryGap: false,
//              axisLabel: {
//                show: true
//              },
//              axisLine: {
//                show: false,
//                lineStyle: {
//                  color: '#e9e9e9',
//                  opacity: 0.8
//                }
//              },
//              axisTick: false
//            }
//          ],
//          series: [
//            {
//              name: '本组合收益(%)',
//              type: 'line',
//              areaStyle: {
//                show: false
//              },
//              itemStyle: {
//                normal: {
//                  color: '#F84949'
//                }
//              },
//              data: []
//            },
//            {
//              name: '标普500(%)',
//              type: 'line',
//              stack: '总量',
//              areaStyle: {
//                show: false
//              },
//              itemStyle: {
//                normal: {
//                  color: '#7792FF'
//                }
//              },
//              data: []
//            }
//          ]
//        }
//        var dataLength = this.allData.benchmarkN.length
//        for(var i = 0; i < dataLength; i++){
//          this.line.series[0].data.push((this.allData.benchmarkN[i]*100).toFixed(2))
//        }
//        for(var j = 0; j < dataLength; j++){
//          this.line.series[1].data.push((this.allData.portfolioN[j]*100).toFixed(2))
//        }
//        for(var k = 0; k < dataLength; k++){
//          xdata.push((this.allData.date[k]))
//        }
//      },
//      week () {
//        this.weekActive = true
//        this.monthActive = false
//        this.yearActive = false
//        var xdata = []
//        this.line = {
//          tooltip: {
//            show: true,
//            trigger: 'axis'
//          },
//          legend: {
//            data: ['Step Start', 'Step Middle']
//          },
//          toolbox: {
//            feature: {
//              saveAsImage: {}
//            }
//          },
//          grid: {
//            left: '2%',
//            top: '4%',
//            right: '3%',
//            bottom: '3%'
////            width: '100%',
////            containLabel: true
//          },
//          xAxis: [
//            {
//              splitLine: {
//                show: false
//              },
//              boundaryGap: false,
//              axisLabel: {
//                show: false
//              },
//              axisTick: false,
//              axisLine: {
//                lineStyle: {
//                  color: '#e9e9e9',
//                  opacity: 0.8
//                }
//              },
//              data: xdata
//            }
//          ],
//          yAxis: [
//            {
//              type: 'value',
//              splitNumber: 3,
//              splitLine: {
//                show: true,
//                lineStyle:{
//                  color: '#e9e9e9',
//                  opacity: 0.5
//                }
//              },
//              boundaryGap: false,
//              axisLabel: {
//                show: true
//              },
//              axisLine: {
//                show: false,
//                lineStyle: {
//                  color: '#e9e9e9',
//                  opacity: 0.8
//                }
//              },
//              axisTick: false
//            }
//          ],
//          series: [
//            {
//              name: '本组合收益(%)',
//              type: 'line',
//              areaStyle: {
//                show: false
//              },
//              itemStyle: {
//                normal: {
//                  color: '#F84949'
//                }
//              },
//              data: []
//            },
//            {
//              name: '标普500(%)',
//              type: 'line',
//              stack: '总量',
//              areaStyle: {
//                show: false
//              },
//              itemStyle: {
//                normal: {
//                  color: '#7792FF'
//                }
//              },
//              data: []
//            }
//          ]
//        }
//        var dataLength = this.allData.benchmarkN.length
//        for(var i = 0; i < dataLength; i++){
//          this.line.series[0].data.push((this.allData.benchmarkN[i]*100).toFixed(2))
//        }
//        for(var j = 0; j < dataLength; j++){
//          this.line.series[1].data.push((this.allData.portfolioN[j]*100).toFixed(2))
//        }
//        for(var k = 0; k < dataLength; k++){
//          xdata.push((this.allData.date[k]))
//        }
//
//      },
      toOpen () {
        this.$router.push('./open2')
      },
      toTrade () {
        this.$router.push('./all')
      },
      hasAccount() {
        let that = this
        axios({
          method: 'GET',
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + "/api/trade/iBind"
        }).then(function (data) {
          if(data.data.code === 6006) {
            that.$router.push('../login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if(data.data.code === 6008) {
            that.isAccount = true
          } else if (data.data.code === 200) {
            if(data.data.data.account){
              that.isIncome = true
            }
          }
        })
      }
    },
    filters: {
      percent (data) {
        if(data) {
          return (parseFloat(data) * 100).toFixed(2)
        } else {
          return 0
        }
      },
      toFixed (data) {
        if (data) {
          return (parseFloat(data)).toFixed(2)
        } else {
          return 0
        }
      },
      toFiexed0 (data) {
        if (data) {
          return (parseFloat(data)).toFixed(0)
        } else {
          return 0
        }
      }
    }
  }
</script>
